<template>
  <div class="hg-toolbar">
    <div class="hg-menu" :class="{active:cfg.active}" v-for="(cfg, index) in config" :key="index">
      <el-tooltip class="item" effect="dark" :content="cfg.content">
        <i
          :class="'iconfont '+ cfg.icon"
          v-if="cfg.type === 'button'"
          @click="handelClick(cfg.command)"
        ></i>

        <el-dropdown trigger="click" v-if="cfg.type === 'select'" @command="handleCommand">
          <i :class="'iconfont '+ cfg.icon"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, i) in cfg.menu"
              :key="i"
              :command="{command:cfg.command,value:item}"
            >{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click" v-if="cfg.type === 'icon-select'" @command="handleCommand">
          <i :class="'iconfont '+ cfg.icon"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in cfg.menu"
              :key="index"
              :icon="'iconfont '+ item.icon"
              :command="item.command"
            >{{item.content}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="font-color" v-if="cfg.type === 'fontcolor'">
          <el-color-picker v-model="color" @change="(val)=>handleChange(val,cfg.command)"></el-color-picker>
        </div>
        <div class="backgroud-color" v-if="cfg.type === 'bgcolor'">
          <el-color-picker v-model="bgcolor" @change="(val)=>handleChange(val,cfg.command)"></el-color-picker>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  props: ['config'],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      color: '#181515',
      bgcolor: '#181515',
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    handleChange(val, command) {
      console.log(val)
      this.$emit('itemclick', { command: command, value: val })
    },
    handelClick(val) {
      this.$emit('itemclick', { command: val, value: val })
    },
    handleCommand(val) {
      if (typeof val === 'object') {
        this.$emit('itemclick', val)
      } else {
        this.$emit('itemclick', { command: val, value: val })
      }
    },
  },
}
</script>
<style lang='scss' scoped>
/* @import url(); 引入公共css类 */
.h1 {
  font-size: 2em;
  font-weight: bold;
}
.h2 {
  font-size: 1.5em;
  font-weight: bold;
}
.h3 {
  font-size: 1.17em;
  font-weight: bold;
}
.h4 {
  font-weight: bold;
}
.h5 {
  font-size: 0.83em;
  font-weight: bold;
}
.h6 {
  font-size: 0.67em;
  font-weight: bold;
}
.item {
  margin: 4px;
}
.el-dropdown {
  margin: 0px;
}
</style>
